<template>

    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="id" label="编号" ></el-table-column>
      <el-table-column prop="name" label="姓名" ></el-table-column>
      <el-table-column prop="typeName" label="种类" ></el-table-column>
      <el-table-column prop="health" label="健康" ></el-table-column>
      <el-table-column prop="birthday" label="生日"  :formatter="formatter"></el-table-column>
      <el-table-column prop="owner_id" label="主人" width="180"></el-table-column>
      <el-table-column prop="store_id" label="商店" width="180"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
              size="mini"
              @click="handleEdit(scope.row)">购买</el-button>
        </template>
      </el-table-column>
    </el-table>


  </template>

<script>
import axios from "axios";
export default {
  name: "ShowPet",
  data(){
    return{
      tableData:[],
    }
  }, mounted() {
    const me = this
    axios.get('http://localhost:3000/table').then(function (res) {
      me.tableData = res.data.data
    }).catch(function (err) {
      console.error(err)
    })
  },methods:{
    handleEdit(row) {
      console.log(row.id);
      const petid = row.id;
      const petstoreid = row.store_id;
      const money = this.$store.state.petowner.money;
      const petownerid = this.$store.state.petowner.id;
      if (money>=500){
        axios.get('http://localhost:3000/buy', {
          params: {
            petid,
            petstoreid,
            petownerid
          }
        }).then(function (res) {
          console.log(res)
        }).catch(function (err) {
          console.log(err)
        })
      }else {
        this.$message.error('无法购买')
      }
    },
    formatter(row){
      const d =new Date(row.birthday)
      return d.toLocaleDateString()
    }
   }
    ,watch:{

  }
}
</script>

<style scoped>

</style>